<template>
    <div class="container">
      <a class="item" :href=hrefArr[0] target="view_window" @mouseenter="handleMouse(0)" @mouseleave="handleLeave"><i class="iconfont icon-qq aliIcon"></i></a>
      <a class="item" :href=hrefArr[1] target="view_window" @mouseenter="handleMouse(1)" @mouseleave="handleLeave"><i class="iconfont icon-zhihu aliIcon"></i></a>
      <a class="item" :href=hrefArr[2] target="view_window" @mouseenter="handleMouse(2)" @mouseleave="handleLeave"><i class="iconfont icon-wechat aliIcon"></i></a>
      <a class="item" :href=hrefArr[3] target="view_window" @mouseenter="handleMouse(3)" @mouseleave="handleLeave"><i class="iconfont icon-weibo aliIcon"></i></a>
      <a class="item" :href=hrefArr[4] target="view_window" @mouseenter="handleMouse(4)" @mouseleave="handleLeave"><i class="iconfont icon-github aliIcon"></i></a>
    </div>
 </template>

<script>
export default {
  name: 'contact',
  data () {
    return {
      hrefArr: [
        'https://20181106.oss-cn-beijing.aliyuncs.com/concat/qq.jpg',
        'https://20181106.oss-cn-beijing.aliyuncs.com/concat/wechat.jpg',
        'https://20181106.oss-cn-beijing.aliyuncs.com/concat/qq.jpg',
        'https://20181106.oss-cn-beijing.aliyuncs.com/concat/wechat.jpg',
        'https://gitee.com/AnthonyZ'
      ]
    }
  },
  methods: {
    handleMouse (id) {
      let showPic = this.hrefArr[id]
      this.$store.commit('updateShow', {show: true, showPic: showPic})
    },
    handleLeave () {
      this.$store.commit('updateShow', {show: false, showPic: ''})
    }
  }
}
</script>

<style scoped lang="stylus">
  .container
    position absolute
    bottom 0.5rem
    right 2rem
    width 17.5rem
    height 3rem
    display flex
    z-index 2
    .item
      display block
      width 3rem
      border-radius 50%
      margin-right 0.5rem
      border 1px solid #fff
      background rgba(0,0,0,.3)
      text-align center
      color #ffffff
      padding-top 0.3rem
      .aliIcon
        font-size 1.8rem
      &:hover
        transform scale(1.2,1.2)
        transition 0.3s ease
        background lightblue
</style>
